<template>
  <div id="app" class="online_service2">
    <!-- 左边的消息列表 -->
    <div :style="{ minHeight: autoHeight }" class="left_news">
      <!-- 显示客服头像和id -->
      <div class="news_list_top">
        <img :src="avatar" >
        <div>{{ nickname | adminNickName }}</div>
      </div>
      <!-- 左边tabnav -->
      <div class="news_list_nav">
        <div
          v-for="(item, index) in navList"
          :key="index"
          :class="clickedNav == index ? 'news_list_nav_active' : ''"
          style="width:42px;"
          @click="navClicked(index)"
        >{{ item }}</div>
      </div>
      <!-- 待接入消息列表 -->
      <div v-if="clickedNav == 0">
        <!-- 搜索 -->
        <div class="search_contain">
          <el-select
            v-model="joinValue"
            filterable
            clearable
            remote
            placeholder="请输入待接入人姓名"
            @change="
              letTheUserJoin(joinValue, join_chat_list.indexOf(joinValue))
            "
          >
            <el-option
              v-for="item in waitJoinList"
              :key="item.id"
              :label="item.service_title"
              :value="item"
            />
          </el-select>
          <img src="../../../../static/images/search.png" class="search_img" >
        </div>
        <div :style="{ height: scrollAutoHeight }">
          <el-scrollbar class="page-scroll">
            <div v-if="join_chat_list.length <= 0" class="noList">暂无待接入用户</div>
            <div
              v-for="(item, index) in join_chat_list"
              :key="index"
              :class="
                join_chat_list_index == index
                  ? 'news_list_content news_list_content_active'
                  : 'news_list_content'
              "
              @click="join_chat_list_clicked(index, item)"
            >
              <div class="news_list_inner">
                <!-- 未读消息 -->
                <div
                  v-if="item.to_access_num > 0 && item.to_access_num <= 99"
                  class="unread_news"
                >{{ item.to_access_num }}</div>
                <div v-if="item.to_access_num > 99" class="unread_news">···</div>
                <img :src="item.logo" >
                <div class="guest_info">
                  <div class="guest_id">{{ item.service_title | guestName }}</div>
                  <div class="time">{{ item.newsTime }}</div>
                </div>
                <div v-if="item.user_identity === 'u'" class="guest_type blue">用户</div>
                <div v-else class="guest_type">商家</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
      <!-- 待回复消息列表 -->
      <div v-if="clickedNav == 1">
        <!-- 搜索 -->
        <div class="search_contain">
          <el-select
            v-model="chatValue"
            filterable
            clearable
            remote
            placeholder="请输入待回复人姓名"
            @change="toTheUserChat(chatValue)"
          >
            <el-option
              v-for="item in joinuserList"
              :key="item.id"
              :label="item.service_title"
              :value="item"
            />
          </el-select>
          <img src="../../../../static/images/search.png" class="search_img" >
        </div>
        <div :style="{ height: scrollAutoHeight }">
          <el-scrollbar class="page-scroll">
            <div v-if="chat_list.length <= 0" class="noList">暂无待回复用户</div>
            <div
              v-for="(item, index) in chat_list"
              :key="index"
              :class="
                chat_list_index == index
                  ? 'news_list_content news_list_content_active'
                  : 'news_list_content'
              "
              @click="chat_list_clicked(index, item)"
              @mouseenter="showDeleteIcon(index)"
              @mouseleave="hideDeleteIcon"
            >
              <div class="news_list_inner">
                <!-- 未读消息 -->
                <div
                  v-if="item.to_reply_num > 0 && item.to_reply_num <= 99"
                  class="unread_news"
                >{{ item.to_reply_num }}</div>
                <div v-if="item.to_reply_num > 99" class="unread_news">···</div>
                <!-- <img
              :class="mouseenterIndex==index?'deleteIcon':'none'"
              src="../../../../static/images/clear.png"
              @click="deleteDialog(index)"
                />-->
                <img :src="item.logo" >
                <div class="guest_info">
                  <div class="guest_id">{{ item.service_title | guestName }}</div>
                  <div class="time">{{ item.newsTime }}</div>
                </div>
                <div v-if="item.user_identity === 'u'" class="guest_type blue">用户</div>
                <div v-else class="guest_type">商家</div>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <!-- 右边的聊天窗口及订单信息 -->
    <!-- 左边的待回复列表被点击时且停留在待回复的列表,且chat_list数组不为空，右边显示相应的内容 -->
    <div
      v-show="chat_list_index != -1 && clickedNav == 1 && chat_list.length != 0"
      class="right_container"
    >
      <div class="right_top">
        <div class="current_guest_info">
          <img :src="nowItem.logo" >
          <div>{{ nowItem.service_title }}</div>
        </div>
      </div>
      <div :style="{ minHeight: leftAutoHeight }" class="has_news">
        <!-- 聊天区域 -->
        <div class="chat">
          <!-- 上 -->
          <div :style="{ height: chatContentAutoHeight }">
            <el-scrollbar ref="scrollbar" class="page-scroll">
              <div v-if="upPullIcon" style="position:relative;">
                <img src="../../../assets/chat_images/loading.gif" alt class="loadingMoreChat" >
              </div>
              <!-- 聊天内容 -->
              <div v-for="(item, index) in chat_content_list" :key="index">
                <!-- 时间 -->
                <div v-if="item.time != null" class="msg_time">{{ item.time }}</div>
                <div
                  v-if="adminIdList.indexOf(item.send_account_id)!=-1 && item.send_account_type == 'a'"
                  class="service_name"
                >客服：{{ adminList[adminIdList.indexOf(item.send_account_id)].nickname }}</div>
                <!-- 目前只显示文字信息和图片信息 -->
                <div v-show="item.msg_type == 1 || item.msg_type == 2||item.msg_type == 'video'" class="msg_list">
                  <!-- 别人发的消息 -->
                  <div
                    v-if="
                      !(
                        adminIdList.indexOf(item.send_account_id)!=-1 &&
                        item.send_account_type === 'a'
                      )
                    "
                    class="chat_content_list_left"
                  >
                    <!-- 头像 -->
                    <img :src="nowItem.logo" alt class="chat_head_photo" >
                    <!-- 文字信息 -->
                    <div v-if="item.msg_type == 1" class="chat_bubble_left">{{ item.text.content }}</div>
                    <!-- 图片信息 -->
                    <div v-if="item.msg_type == 2" class="chat_bubble_left">
                      <img
                        :src="item.msg.url"
                        :style="{
                          width: item.msg.w + 'px',
                          height: item.msg.h + 'px'
                        }"
                        @click="toBigImg(item)"
                      >
                      <!--大图弹窗-->
                      <transition name="el-zoom-in-top">
                        <div v-show="isBigImg==true" class="bigImg" @click="isBigImg=false">
                          <img
                            :src="currentBigImg.url"
                            :style="{
                              width: currentBigImg.w*10 + 'px'
                            }"
                          >
                        </div>
                      </transition>
                    </div>
                    <!-- 视频信息消息 -->
                    <div v-if="item.msg_type == 'video'" class="chat_bubble_left">
                      <video :src="item.msg.url" controls class="video_msg"/>
                    </div>
                  </div>
                  <!-- 自己发的消息 -->
                  <div
                    v-if="
                      adminIdList.indexOf(item.send_account_id)!=-1 &&
                        item.send_account_type === 'a'
                    "
                    class="chat_content_list_right"
                  >
                    <!-- 文字信息 -->
                    <div v-if="item.msg_type == 1" class="chat_bubble_right">
                      <!-- 加载中动图 -->
                      <img
                        v-if="
                          showLoadingGif &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/loading.gif"
                        class="sendStatusIcon"
                      >
                      <!-- 红色感叹号图片,出现的时候点击可以重发信息 -->
                      <img
                        v-if="
                          showExclamatoryIcon &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/exclamatory.png"
                        class="sendStatusIcon"
                        @click="sendMsgAgain(item)"
                      >
                      <div style="margin-top: 4px;">{{ item.text.content }}</div>
                    </div>
                    <!-- 图片信息 -->
                    <div v-if="item.msg_type == 2" class="chat_bubble_right">
                      <!-- 加载中动图 -->
                      <img
                        v-if="
                          showLoadingGif &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/loading.gif"
                        class="sendStatusIcon"
                      >
                      <!-- 红色感叹号图片,出现的时候点击可以重发信息 -->
                      <img
                        v-if="
                          showExclamatoryIcon &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/exclamatory.png"
                        class="sendStatusIcon"
                        @click="sendMsgAgain(item)"
                      >
                      <img
                        :src="item.msg.url"
                        :style="{
                          width: item.msg.w + 'px',
                          height: item.msg.h + 'px'
                        }"
                        @click="toBigImg(item)"
                      >
                      <!--大图弹窗-->
                      <transition name="el-zoom-in-top">
                        <div v-show="isBigImg==true" class="bigImg" @click="isBigImg=false">
                          <img
                            :src="currentBigImg.url"
                            :style="{
                              width: currentBigImg.w*10 + 'px'
                            }"
                          >
                        </div>
                      </transition>
                    </div>
                    <!-- 视频信息消息 -->
                    <div v-if="item.msg_type == 'video'" class="chat_bubble_right">
                      <!-- 加载中动图 -->
                      <img
                        v-if="
                          showLoadingGif &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/loading.gif"
                        class="sendStatusIcon"
                      >
                      <!-- 红色感叹号图片,出现的时候点击可以重发信息 -->
                      <img
                        v-if="
                          showExclamatoryIcon &&
                            chat_content_list.indexOf(item) ==
                            chat_content_list.length - 1
                        "
                        src="../../../assets/chat_images/exclamatory.png"
                        class="sendStatusIcon"
                        @click="sendMsgAgain(item)"
                      >
                      <video :src="item.msg.url" controls class="video_msg"/>
                    </div>
                    <!-- 头像 -->
                    <img
                      :src="adminList[adminIdList.indexOf(item.send_account_id)].head_img"
                      alt
                      class="chat_head_photo"
                    >
                  </div>
                </div>
              </div>
            </el-scrollbar>
          </div>
          <!-- 下 -->
          <!-- 编辑聊天发送的消息-->
          <div class="chat_edit">
            <div class="add_look">
              <!-- 添加表情 -->
              <div>
                <div class="msg_face" @click="hasEmoji = !hasEmoji" />
                <div v-if="hasEmoji === true" class="emoji" @mouseleave="hasEmoji = false">
                  <div
                    v-for="(item, index) in emoji_list"
                    :key="index"
                    class="emoji_li"
                    @click="chat_input_emoji(index)"
                  >{{ item.emoji }}</div>
                </div>
              </div>
              <!-- 添加图片 -->
              <el-upload
                :show-file-list="false"
                :before-upload="beforeAvatarUpload"
                :http-request="upload_image"
                action
              >
                <img src="../../../../static/images/msg-photo.png" style="margin-right:18px;">
              </el-upload>
              <!-- 添加视频 -->
              <el-upload
                :show-file-list="false"
                :http-request="upload_video"
                :before-upload="beforeUploadVideo"
                action
              >
                <img src="../../../../static/images/video.png" style="width:22px;height:22px" >
              </el-upload>
            </div>
            <textarea
              ref="textareaBox"
              v-model="chat_input"
              class="write_news"
              @keyup.enter="getTextareaText"
            />
            <div class="send_btn" @click="getTextareaText">发送</div>
          </div>
        </div>
      </div>
    </div>
    <!-- 反之，右边显示一张图片 -->
    <div
      v-show="
        !((chat_list_index != -1) & (clickedNav == 1) & (chat_list.length != 0))
      "
      class="no_news"
    >
      <img src="../../../../static/images/noNews.png" alt >
      <p>主人棒棒哒！</p>
    </div>
  </div>
</template>

<script>
import { addPageVisitNum } from '@/utils/addPageVisitNum.js'
import '@/styles/scroll.css'
import store from '@/store'
import { mapGetters } from 'vuex'
import { client } from '@/utils/alioss'
import {
  getChatList,
  getChatContent,
  sendMsg,
  agreeChat,
  getAdminList
} from '@/api/server/server'
import mqtt from 'mqtt'
var mqtt_client = null
export default {
  filters: {
    adminNickName(value) {
      if (!value) return ''
      if (value.length > 10) {
        return value.slice(0, 10) + '...'
      }
      return value
    },
    guestName(value) {
      if (!value) return ''
      if (value.length > 7) {
        return value.slice(0, 7) + '...'
      }
      return value
    },
    goodNameNum(value) {
      if (!value) return ''
      if (value.length > 30) {
        return value.slice(0, 30) + '...'
      }
      return value
    }
  },
  data() {
    return {
      msg: '',
      hasEmoji: false,
      mouseenterIndex: -1,
      search_text: '',
      chat_input: '',
      autoHeight: '',
      leftAutoHeight: '',
      chatContentAutoHeight: '',
      scrollAutoHeight: '',
      navList: ['待接入', '待回复'],
      // 左边nav切换
      clickedNav: 0,
      rightNavIndex: 0,
      // 待接入列表索引
      join_chat_list_index: -1,
      // 待回复列表索引，根据该索引进行高亮显示
      chat_list_index: -1,
      // 存放当前聊天的人的所有信息
      nowItem: {},
      // 待接入的列表
      join_chat_list: [],
      // 待回复消息列表
      chat_list: [],
      // 是否有历史消息
      moreContent: true,
      emoji_list: [
        { emoji: '😁', title: '', unicode: '' },
        { emoji: '😂', title: '', unicode: '' },
        { emoji: '😃', title: '', unicode: '' },
        { emoji: '😄', title: '', unicode: '' },
        { emoji: '👿', title: '', unicode: '' },
        { emoji: '😉', title: '', unicode: '' },
        { emoji: '😊', title: '', unicode: '' },
        { emoji: '😌', title: '', unicode: '' },
        { emoji: '😤', title: '', unicode: '' },
        { emoji: '😍', title: '', unicode: '' },
        { emoji: '😏', title: '', unicode: '' },
        { emoji: '😒', title: '', unicode: '' },
        { emoji: '😓', title: '', unicode: '' },
        { emoji: '😔', title: '', unicode: '' },
        { emoji: '😖', title: '', unicode: '' },
        { emoji: '😘', title: '', unicode: '' },
        { emoji: '😚', title: '', unicode: '' },
        { emoji: '😜', title: '', unicode: '' },
        { emoji: '😝', title: '', unicode: '' },
        { emoji: '😞', title: '', unicode: '' },
        { emoji: '😠', title: '', unicode: '' },
        { emoji: '😡', title: '', unicode: '' },
        { emoji: '😢', title: '', unicode: '' },
        { emoji: '😣', title: '', unicode: '' },
        { emoji: '😥', title: '', unicode: '' },
        { emoji: '😨', title: '', unicode: '' },
        { emoji: '😪', title: '', unicode: '' },
        { emoji: '😭', title: '', unicode: '' },
        { emoji: '😰', title: '', unicode: '' },
        { emoji: '😱', title: '', unicode: '' },
        { emoji: '😲', title: '', unicode: '' },
        { emoji: '😳', title: '', unicode: '' },
        { emoji: '😷', title: '', unicode: '' },
        { emoji: '😋', title: '', unicode: '' },
        { emoji: '😎', title: '', unicode: '' },
        { emoji: '😩', title: '', unicode: '' },
        { emoji: '😐', title: '', unicode: '' },
        { emoji: '😶', title: '', unicode: '' },
        { emoji: '😅', title: '', unicode: '' }
      ],
      // 聊天内容
      chat_content_list: [],
      // 是否显示感叹号
      showExclamatoryIcon: false,
      // 是否显示加载中动图
      showLoadingGif: false,
      joinuserList: [],
      chatValue: '',
      waitJoinList: [],
      joinValue: '',
      // 判断是否显示上拉加载图片
      upPullIcon: false,
      // 判断是否执行上拉事件
      doUpPull: false,
      isBigImg: false,
      currentBigImg: '',
      merchantId: 1,
      // 公司管理员列表
      adminList: [],
      // 公司管理员id列表
      adminIdList: []
    }
  },
  computed: {
    ...mapGetters(['avatar', 'adminId', 'nickname'])
  },
  watch: {
    chat_list: {
      handler() {
        this.joinuserList = this.chat_list
      },
      deep: true
    },
    join_chat_list: {
      handler() {
        this.waitJoinList = this.join_chat_list
      },
      deep: true
    }
  },
  created() {
    this.getOurAdminList()
    this.get_join_chat_list()
    this.get_chat_list()
    this.mqttMSG()
    addPageVisitNum(this.$router.currentRoute.fullPath, '在线客服2')
  },
  beforeMount() {
    this.joinuserList = this.chat_list
    this.waitJoinList = this.join_chat_list
  },
  mounted() {
    this.autoHeight = window.innerHeight - 84 + 'px'
    this.leftAutoHeight = window.innerHeight - 148 + 'px'
    this.scrollAutoHeight = window.innerHeight - 234 + 'px'
    this.chatContentAutoHeight = window.innerHeight - 277 + 'px'
    this.$refs.scrollbar.wrap.addEventListener(
      'scroll',
      res => {
        const scrollTop = res.target.scrollTop
        if (scrollTop == 0) {
          this.getHistoryChatRecord()
        }
      },
      true
    )
  },
  updated() {
    if (this.doUpPull == false) {
      this.$refs.scrollbar.wrap.scrollTop = this.$refs.scrollbar.wrap.scrollHeight
    }
  },
  methods: {
    // 上传视频
    upload_video(res) {
      console.log('11111111resresresresres', res)
      var fileName = 'video' + res.file.uid
      client()
        .put(fileName, res.file)
        .then(result => {
          console.log('视频视频视频', result.url)
          var lastid
          var beforeTime
          if (this.chat_content_list.length > 0) {
            lastid = this.chat_content_list[this.chat_content_list.length - 1]
              .id
            lastid++
            beforeTime = this.chat_content_list[
              this.chat_content_list.length - 1
            ].create_time
          } else {
            lastid = 0
            beforeTime = 0
          }
          var nowtime = Math.round(new Date().getTime() / 1000).toString()
          if (nowtime - beforeTime > 300) {
            nowtime = this.formatTime(nowtime)
          } else {
            nowtime = null
          }
          var self = this
          // 创建对象
          // var img = new Image();
          // 改变图片的src
          // img.src = result.url;
          // 加载完成执行
          // img.onload = function() {
          // 此处可以拿到图片的地址和宽高，然后对图片进行缩放
          const temp = {
            id: lastid,
            send_account_id: self.adminId,
            send_account_type: 'a',
            time: nowtime,
            msg_type: 'video',
            msg: {
              url: result.url
            }
          }
          // 将图片塞入自己发送的气泡中
          self.chat_content_list.push(self.setPicSize(temp))
          self.doUpPull = false
          self.showLoadingGif = true
          const msg = {
            url: result.url
          }
          // 向后台发视频
          self.realSendMsg(msg, 'video')
          // };
        })
        .catch(err => {
          this.$message.error('图片上传失败，原因' + err)
          // 显示感叹号
          this.showExclamatoryIcon = true
          // 关闭加载中动图
          this.showLoadingGif = false
        })
    },
    beforeUploadVideo(file) {
      const isLt10M = file.size / 1024 / 1024 < 10
      if (
        [
          'video/mp4',
          'video/ogg',
          'video/flv',
          'video/avi',
          'video/wmv',
          'video/rmvb'
        ].indexOf(file.type) == -1
      ) {
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt10M) {
        this.$message.error('上传视频大小不能超过10MB哦!')
        return false
      }
    },
    // 获取公司管理员列表
    getOurAdminList() {
      var data = {
        token: store.getters.token
      }
      getAdminList(data)
        .then(res => {
          if (res.data.status) {
            this.adminList = res.data.list.data
            for (let i = 0; i < this.adminList.length; i++) {
              this.adminIdList.push(this.adminList[i].id)
            }
            console.log('1111111111', this.adminList)
            console.log('2222222222', this.adminIdList)
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log('获取管理员列表', err)
        })
    },
    toBigImg(item) {
      this.isBigImg = !this.isBigImg
      this.currentBigImg = item.msg
    },
    // 去除掉html标签,保留标签里面的内容
    removeTag(str) {
      const reg = /<\/?.+?\/?>/g
      return str.replace(reg, '')
    },
    // 获取待接入的列表
    get_join_chat_list() {
      var data = {
        token: store.getters.chatToken,
        merchant_id: this.merchantId,
        in_service: '0',
        is_close: '0',
        accept_account_id: this.adminId,
        accept_account_type: 'a',
        merchant_type: 'a'
      }
      getChatList(data)
        .then(res => {
          if (res.data.status) {
            for (let i = 0; i < res.data.list.length; i++) {
              mqtt_client.subscribe(
                'msg/' + res.data.list[i].chat_id + '/a_' + this.adminId,
                error => {
                  if (!error) {
                    console.log(
                      '连接成功待接入列表msg/' +
                        res.data.list[i].chat_id +
                        '/a_' +
                        this.adminId
                    )
                  } else {
                    console.log(
                      '订阅失败待接入列表msg/' +
                        res.data.list[i].chat_id +
                        '/a_' +
                        this.adminId +
                        error
                    )
                  }
                }
              )
              if (res.data.list[i].last_msg != null) {
                // 格式化时间处理最后一条消息
                res.data.list[i].newsTime = this.formatTime(
                  res.data.list[i].last_msg.create_time
                )
              }
            }
            this.join_chat_list = res.data.list
          }
        })
        .catch(err => {
          console.log('待接入列表数据', err)
        })
    },
    // 获取待回复列表数据
    get_chat_list() {
      var data = {
        token: store.getters.chatToken,
        merchant_id: this.merchantId,
        in_service: '1',
        is_close: '0',
        accept_account_id: this.adminId,
        accept_account_type: 'a',
        merchant_type: 'a'
      }
      getChatList(data)
        .then(res => {
          if (res.status) {
            for (let i = 0; i < res.data.list.length; i++) {
              mqtt_client.subscribe(
                'msg/' + res.data.list[i].chat_id + '/a_' + this.adminId,
                error => {
                  if (!error) {
                    console.log(
                      '连接成功待回复列表msg/' +
                        res.data.list[i].chat_id +
                        '/a_' +
                        this.adminId
                    )
                  } else {
                    console.log(
                      '订阅失败待回复列表msg/' +
                        res.data.list[i].chat_id +
                        '/a_' +
                        this.adminId
                    )
                  }
                }
              )
              if (res.data.list[i].last_msg != null) {
                // 格式化时间处理最后一条消息
                res.data.list[i].newsTime = this.formatTime(
                  res.data.list[i].last_msg.create_time
                )
              }
              // 给每个列表新增page属性
              res.data.list[i].page = 1
              // 给每个列表新增moreContent属性
              res.data.list[i].moreContent = true
            }
            this.chat_list = res.data.list
          }
          // console.log('待回复列表数据', res)
        })
        .catch(err => {
          console.log('待回复列表数据', err)
        })
    },
    // 格式化时间
    formatTime(time) {
      if (time == null) {
        return
      }
      time = new Date(time * 1000)
      const y = time.getFullYear()
      const m =
        time.getMonth() + 1 >= 10
          ? time.getMonth() + 1
          : '0' + (time.getMonth() + 1)
      const d = time.getDate() >= 10 ? time.getDate() : '0' + time.getDate()
      const h = time.getHours() >= 10 ? time.getHours() : '0' + time.getHours()
      const f =
        time.getMinutes() >= 10 ? time.getMinutes() : '0' + time.getMinutes()
      return y + '.' + m + '.' + d + ' ' + h + ':' + f
    },
    // 获取最新的聊天内容
    getChatRecord() {
      this.doUpPull = false
      var data = {
        token: store.getters.chatToken,
        accept_account_id: this.adminId,
        accept_account_type: 'a',
        chat_id: this.nowItem.chat_id,
        // 第一页
        page: 1
      }
      getChatContent(data)
        .then(res => {
          if (res.data.status) {
            // 刷新待回复列表
            this.get_chat_list()
            this.chat_content_list = res.data.list.data
            var temp_time = 0
            for (var i = 0; i < this.chat_content_list.length; i++) {
              // 格式化信息
              this.chat_content_list[i].msg = JSON.parse(
                this.chat_content_list[i].content
              )
              // 处理文字信息
              if (this.chat_content_list[i].msg_type == 1) {
                this.chat_content_list[i].text = JSON.parse(
                  this.removeTag(this.chat_content_list[i].content)
                )
              }
              // 格式化时间
              if (
                this.chat_content_list[i].msg_type == 1 ||
                this.chat_content_list[i].msg_type == 2
              ) {
                if (this.chat_content_list[i].create_time - temp_time > 300) {
                  this.chat_content_list[i].time = this.formatTime(
                    this.chat_content_list[i].create_time
                  )
                  temp_time = this.chat_content_list[i].create_time
                } else {
                  this.chat_content_list[i].time = null
                }
              }
            }
            // 因为拿到的数据是展示最近时间----》最久的时间，所以需要排序
            this.chat_content_list = this.chat_content_list.reverse()
          } else {
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          console.log('获取第一页聊天内容', err)
        })
    },
    // 获取历史聊天记录
    getHistoryChatRecord() {
      this.nowItem.page = this.nowItem.page + 1
      var data = {
        token: store.getters.chatToken,
        accept_account_id: this.adminId,
        accept_account_type: 'a',
        chat_id: this.nowItem.chat_id,
        page: this.nowItem.page
      }
      if (this.nowItem.moreContent) {
        this.upPullIcon = true
        getChatContent(data)
          .then(res => {
            this.doUpPull = true
            this.upPullIcon = false
            if (res.data.list.data.length > 0) {
              if (res.data.status) {
                // this.$refs.scrollbar.wrap.scrollTop = 400
                var historyList = res.data.list.data
                var temp_time = 0
                for (let i = 0; i < historyList.length; i++) {
                  // 格式化信息
                  historyList[i].msg = JSON.parse(historyList[i].content)
                  // 处理文字信息
                  if (historyList[i].msg_type == 1) {
                    historyList[i].text = JSON.parse(
                      this.removeTag(historyList[i].content)
                    )
                  }
                  // 格式化时间
                  if (
                    this.chat_content_list[i].msg_type == 1 ||
                    this.chat_content_list[i].msg_type == 2
                  ) {
                    if (historyList[i].create_time - temp_time > 300) {
                      historyList[i].time = this.formatTime(
                        historyList[i].create_time
                      )
                      temp_time = historyList[i].create_time
                    } else {
                      historyList[i].time = null
                    }
                  }
                }
                this.chat_content_list = historyList
                  .reverse()
                  .concat(this.chat_content_list)
              } else {
                this.$message({
                  message: res.data.msg,
                  type: 'error'
                })
              }
            } else {
              this.nowItem.moreContent = false
              this.$message({
                message: '没有更多聊天内容了',
                type: 'warning'
              })
            }
            console.log('获取第' + this.nowItem.page + '页聊天内容', res)
          })
          .catch(err => {
            console.log('获取第' + this.nowItem.page + '页聊天内容', err)
          })
      }
    },
    // mqtt连接
    mqttMSG() {
      // mqtt连接
      mqtt_client = mqtt.connect('wss://qianxun.zanboon.com:8084/mqtt', {
        clientId: 'pcmqtt' + new Date().getTime()
      })
      mqtt_client.subscribe('msg/0/a_' + this.adminId, error => {
        if (!error) {
          console.log('连接成功系统消息msg/0/a_' + this.adminId)
        } else {
          console.log('订阅失败系统消息msg/0/a_' + this.adminId)
          console.log('失败原因', error)
        }
      })
      // 接收消息处理
      mqtt_client.on('message', (topic, message) => {
        var msg = JSON.parse(message.toString())
        console.log('订阅拿到的消息', msg)
        // 收到系统发的消息
        if (msg.msg_type === 'create_chat') {
          console.log('拿到的消息类型是create_chat')
          this.get_join_chat_list() // 刷新待接入列表
        }
        // 订阅到的消息是用户发的信息
        if (
          !(
            msg.send_account_id == this.adminId && msg.send_account_type === 'a'
          )
        ) {
          if (msg.chat_id == this.nowItem.chat_id) {
            // 当前正在聊天的用户
            mqtt_client.publish('read_msg', msg.id.toString())
            this.screenMsg(msg)
          } else {
            // 不是当前正在聊天的用户
            if (msg.msg_type == 1 || msg.msg_type == 2) {
              if (this.clickedNav == 0) {
                // 刷新待接入列表
                this.get_join_chat_list()
              } else if (this.clickedNav == 1) {
                // 刷新待回复列表
                this.get_chat_list()
              }
            }
          }
        }
      })
    },
    // 处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
    setPicSize(row) {
      const maxW = 300
      const maxH = 300
      if (row.msg.w > maxW || row.msg.h > maxH) {
        const scale = row.msg.w / row.msg.h
        if (row.msg.w > row.msg.h) {
          row.msg.w = maxW
          row.msg.h = row.msg.w / scale
        } else {
          row.msg.h = maxH
          row.msg.w = row.msg.h * scale
        }
      }
      return row
    },
    beforeAvatarUpload(file) {
      const _this = this
      const isChoose = _this.chat_list.length > 0
      const isJPG = file.type === 'image/jpeg'
      const isPNG = file.type === 'image/png'
      const isGIF = file.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isChoose) {
        this.$message.error('当前无顾客可发送消息！')
      }
      if (!isJPG && !isPNG && !isGIF) {
        this.$message.error('上传图片只能是 JPG、PNG、GIF 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
      }
      return isChoose && isJPG | isPNG | isGIF && isLt2M
    },
    upload_image(file) {
      var fileName = 'img' + file.file.uid
      client()
        .put(fileName, file.file)
        .then(result => {
          var lastid
          var beforeTime
          if (this.chat_content_list.length > 0) {
            lastid = this.chat_content_list[this.chat_content_list.length - 1]
              .id
            lastid++
            beforeTime = this.chat_content_list[
              this.chat_content_list.length - 1
            ].create_time
          } else {
            lastid = 0
            beforeTime = 0
          }
          var nowtime = Math.round(new Date().getTime() / 1000).toString()
          if (nowtime - beforeTime > 300) {
            nowtime = this.formatTime(nowtime)
          } else {
            nowtime = null
          }
          var self = this
          // 创建对象
          var img = new Image()
          // 改变图片的src
          img.src = result.url
          // 加载完成执行
          img.onload = function() {
            // 此处可以拿到图片的地址和宽高，然后对图片进行缩放
            const temp = {
              id: lastid,
              send_account_id: self.adminId,
              send_account_type: 'a',
              time: nowtime,
              msg_type: 2,
              msg: {
                w: img.width,
                h: img.height,
                url: img.src
              }
            }
            // 将图片塞入自己发送的气泡中
            self.chat_content_list.push(self.setPicSize(temp))
            self.doUpPull = false
            self.showLoadingGif = true
            let row = {
              msg: {
                w: img.width,
                h: img.height,
                url: img.src
              }
            }
            row = self.setPicSize(row)
            // 向后台发图片
            self.realSendMsg(row.msg, 2)
          }
        })
        .catch(err => {
          this.$message.error('图片上传失败，原因' + err)
          // 显示感叹号
          this.showExclamatoryIcon = true
          // 关闭加载中动图
          this.showLoadingGif = false
        })
    },
    // 左边的nav被点击时切换样式,弹框询问是否接入
    navClicked(index) {
      this.clickedNav = index
    },
    // 待接入列表被点击时，拿到被点击的项,然后跳转到待回复列表，右边展示相应的内容
    join_chat_list_clicked(index, item) {
      this.$confirm('确定接入与该用户的聊天对话?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          // 接入该用户
          var data = {
            token: store.getters.chatToken,
            chat_id: item.chat_id,
            service_account_id: this.adminId,
            service_account_type: 'a'
          }
          agreeChat(data)
            .then(res => {
              const _this = this
              if (res.data.status) {
                this.$message({
                  message: '接入成功',
                  type: 'success',
                  center: true,
                  showClose: true
                })
                var temp = _this.join_chat_list[index]
                // 删除待接入中接入的项
                _this.$delete(_this.join_chat_list, index)
                // 更新待回复列表，新接入的放在最后面
                _this.chat_list.push(temp)
                // 待回复列表此时高亮显示的项
                _this.chat_list_index = _this.chat_list.length - 1
                _this.nowItem = item
                // 跳转到待回复列表
                _this.clickedNav = 1
                // 获取对话内容
                _this.getChatRecord()
              } else {
                this.$message({
                  message: '接入失败',
                  type: 'error',
                  center: true,
                  showClose: true
                })
              }
            })
            .catch(err => {
              console.log('接入用户', err)
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消接入!'
          })
        })
    },
    // 待回复列表被点击时，右边展示相应的内容，根据chat_list_index高亮显示待回复列表，右边展示相应的内容
    chat_list_clicked(index, item) {
      this.chat_list_index = index
      this.nowItem = item
      this.getChatRecord()
    },
    // 搜索显示该用户的信息及聊天记录
    toTheUserChat(chatValue) {
      if (chatValue != '') {
        this.nowItem = chatValue
        this.chat_list_index = this.chat_list.indexOf(this.nowItem)
        // 获取对话内容
        this.getChatRecord()
        this.chatValue = ''
      }
    },
    // 搜索接入该用户
    letTheUserJoin(joinValue, index) {
      if (joinValue != '') {
        // console.log('搜索到的待接入用户为', joinValue)
        this.$confirm('确定接入与该用户的聊天对话?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            // 接入该用户
            var data = {
              token: store.getters.chatToken,
              chat_id: joinValue.chat_id,
              service_account_id: this.adminId,
              service_account_type: 'a'
            }
            agreeChat(data)
              .then(res => {
                const _this = this
                if (res.data.status) {
                  this.$message({
                    message: '接入成功',
                    type: 'success',
                    center: true,
                    showClose: true
                  })
                  var temp = _this.join_chat_list[index]
                  // 删除待接入中接入的项
                  _this.$delete(_this.join_chat_list, index)
                  // 更新待回复列表，新接入的放在最后面
                  _this.chat_list.push(temp)
                  // 待回复列表此时高亮显示的项
                  _this.chat_list_index = _this.chat_list.length - 1
                  _this.nowItem = joinValue
                  // 跳转到待回复列表
                  _this.clickedNav = 1
                  // 获取对话内容
                  _this.getChatRecord()
                } else {
                  this.$message({
                    message: '接入失败',
                    type: 'error',
                    center: true,
                    showClose: true
                  })
                }
              })
              .catch(err => {
                console.log('接入用户', err)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消接入!'
            })
          })
      }
      this.joinValue = ''
    },
    // 转化html
    addTags(str) {
      return `<div style="display: flex;align-items: center;">${str}</div>`
    },
    // 判断用户输入的不为空且不能全为空格
    isNull(str) {
      // 去除输入的字符串中的\n,再判断字符串中是否只有空格或为空,如果不去除\n，回车键触发事件的时候下面的返回值只会为false
      str = JSON.parse(JSON.stringify(str).replace(/\\n/g, '')).toString()
      if (str == '') return true
      var regu = '^[ ]+$'
      var re = new RegExp(regu)
      return re.test(str)
    },
    // 得到聊天时用户输入的信息，发送信息
    getTextareaText() {
      this.doUpPull = false
      // 输入的内容不能为空或者全是空格
      var isEmpty = this.isNull(this.chat_input)
      if (!isEmpty) {
        // 文字或表情包
        var lastid
        var beforeTime
        if (this.chat_content_list.length > 0) {
          lastid = this.chat_content_list[this.chat_content_list.length - 1].id
          lastid++
          beforeTime = this.chat_content_list[this.chat_content_list.length - 1]
            .create_time
        } else {
          lastid = 0
          beforeTime = 0
        }
        var nowtime = Math.round(new Date().getTime() / 1000).toString()
        if (nowtime - beforeTime > 300) {
          nowtime = this.formatTime(nowtime)
        } else {
          nowtime = null
        }
        const msg = {
          id: lastid,
          send_account_id: this.adminId,
          send_account_type: 'a',
          time: nowtime,
          msg_type: 1,
          text: {
            content: this.chat_input
          }
        }
        // 将编辑好的信息直接推到气泡中
        this.chat_content_list.push(msg)
        // 显示加载中动画
        this.showLoadingGif = true
        var data = {
          content: this.addTags(this.chat_input)
        }
        // 将文字信息推给后台
        this.realSendMsg(data, 1)
        this.chat_input = ''
      } else {
        this.$message({
          showClose: true,
          message: '输入的内容不能为空！',
          type: 'warning'
        })
      }
    },
    // 发送消息，给后台
    realSendMsg(content, type) {
      this.doUpPull = false
      var data = {
        token: store.getters.chatToken,
        chat_id: this.nowItem.chat_id,
        send_account_id: this.adminId,
        send_account_type: 'a',
        content: JSON.stringify(content),
        msg_type: type
      }
      sendMsg(data)
        .then(res => {
          if (res.data.status) {
            // 发送成功
            // 关闭加载中动图
            this.showLoadingGif = false
            // 关闭感叹号图
            this.showExclamatoryIcon = false
          } else {
            // 显示感叹号
            this.showExclamatoryIcon = true
            // 关闭加载中动图
            this.showLoadingGif = false
            // 关闭加载中
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          // 显示感叹号
          this.showExclamatoryIcon = true
          // 关闭加载中动图
          this.showLoadingGif = false
          console.log('发送消息', err)
        })
    },
    // 重发发送失败的消息
    sendMsgAgain(msg) {
      this.doUpPull = false
      this.showLoadingGif = true
      this.showExclamatoryIcon = false // 不显示感叹号
      var data = {
        token: store.getters.chatToken,
        chat_id: this.nowItem.chat_id,
        send_account_id: this.adminId,
        send_account_type: 'a',
        content: msg.content,
        msg_type: msg.msg_type
      }
      sendMsg(data)
        .then(res => {
          if (res.data.status) {
            // 发送成功
            // 关闭加载中动图
            this.showLoadingGif = false
            // 关闭感叹号图
            this.showExclamatoryIcon = false
          } else {
            // 显示感叹号
            this.showExclamatoryIcon = true
            // 关闭加载中动图
            this.showLoadingGif = false
            // 关闭加载中
            this.$message({
              message: res.data.msg,
              type: 'error'
            })
          }
        })
        .catch(err => {
          // 显示感叹号
          this.showExclamatoryIcon = true
          // 关闭加载中动图
          this.showLoadingGif = false
          console.log('重新发送消息', err)
        })
    },
    // 接受消息(筛选处理)
    screenMsg(msg) {
      this.doUpPull = false
      const self = this
      if (
        !(msg.send_account_id == self.adminId && msg.send_account_type === 'a')
      ) {
        // 收到客户发的消息
        msg.msg = JSON.parse(msg.content) // 处理收到的信息
        // 处理文字信息
        if (msg.msg_type == 1) {
          msg.text = JSON.parse(this.removeTag(msg.content))
        }
        var beforeTime // 判断时间该不该显示
        if (self.chat_content_list.length > 0) {
          beforeTime =
            self.chat_content_list[self.chat_content_list.length - 1]
              .create_time
        } else {
          beforeTime = 0
        }
        if (msg.create_time - beforeTime > 300) {
          msg.date_time = msg.create_time
        } else {
          msg.date_time = null
        }
        msg.date_time = self.formatTime(msg.date_time) // 格式化时间
      }
      switch (true) {
        case msg.msg_type == 1 || msg.msg_type == '1':
          this.addTextMsg(msg)
          break
        case msg.msg_type == 2 || msg.msg_type == '2':
          this.addImgMsg(msg)
          break
        case msg.msg_type == 'video':
          this.addVideoMsg(msg)
          break
      }
    },
    // 处理文字消息
    addTextMsg(msg) {
      this.chat_content_list.push(msg)
    },
    // 处理图片消息
    addImgMsg(msg) {
      msg = this.setPicSize(msg)
      this.chat_content_list.push(msg)
    },
    addVideoMsg(msg) {
      this.chat_content_list.push(msg)
    },
    // 编辑信息时，加入表情包
    chat_input_emoji(index) {
      const _this = this
      const chat_input = this.chat_input + this.emoji_list[index]['emoji']
      if (_this.chat_list.length > 0) {
        this.$set(_this, 'chat_input', chat_input)
      }
    },
    showDeleteIcon(index) {
      this.mouseenterIndex = index
    },
    hideDeleteIcon() {
      this.mouseenterIndex = -1
    },
    // 删除待回复的对话
    deleteDialog(index) {
      this.$confirm('确定删除与该用户的聊天对话?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const _this = this
          _this.$delete(_this.chat_list, index)
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 清除
    clear() {
      this.search_text = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.video_msg {
  width: 180px;
  height: 270px;
  border-radius: 4px;
  object-fit: fill;
}
.service_name {
  text-align: right;
  color: #aaa;
  font-size: 13px;
  padding-right: 20px;
}
.bigImg {
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999999;
  background: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  /*transition:1s;*/
}
.bigImg img {
  max-width: 500px;
  min-width: 150px;
  height: auto;
  border-radius: 10px;
}
.loadingMoreChat {
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.page-scroll {
  height: 100%;
}
.sendStatusIcon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  position: absolute;
  left: -30px;
  top: 50%;
  transform: translateY(-50%);
}
.msg_time {
  text-align: center;
  color: #aaa;
  font-size: 13px;
}
.msg_list {
  padding: 10px 20px;
}
.imgMsg {
  width: 300px;
  height: 300px;
  background-size: 100% 100%;
}
.chat_content_list_left {
  display: flex;
  width: 50%;
  // margin-left: 20px;
  // margin-top: 18px;
}
.chat_head_photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}
.chat_bubble_left {
  border-radius: 8px;
  background-color: #f8f8f8;
  padding: 12px 10px;
  color: #666666;
  font-size: 14px;
  position: relative;
  margin-left: 10px;
  word-break: break-word;
}
.chat_bubble_left::before {
  content: "";
  position: absolute;
  top: 25px;
  left: -4px;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  background: inherit;
  /*自动继承父元素的背景*/
  transform: rotate(45deg);
}
.chat_content_list_right {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  position: relative;
}
.chat_bubble_right {
  border-radius: 8px;
  background-color: #d6f4ff;
  padding: 8px 10px;
  color: #333;
  font-size: 14px;
  position: relative;
  margin-left: 50%;
  margin-right: 10px;
  word-break: break-word;
}
.chat_bubble_right::before {
  content: "";
  position: absolute;
  top: 25px;
  right: -4px;
  width: 10px;
  height: 10px;
  margin-top: -10px;
  background: inherit;
  /*自动继承父元素的背景*/
  transform: rotate(45deg);
}
.none {
  display: none;
}
.image {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  padding-top: 10px;
}
.ivu-scroll-wrapper {
  width: 100%;
}
.ivu-scroll-container {
  height: 100%;
}
.online_service2 {
  width: 100%;
  display: flex;
}
.left_news {
  width: 252px;
  border-right: 1px solid #e6e6e6;
}
.news_list_top {
  height: 64px;
  background-color: #304156;
  padding: 11px 0px 13px 11px;
  display: flex;
  border-right: none;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  div {
    // width: 45px;
    // height: 22px;
    color: #fff;
    font-size: 16px;
    margin-left: 12px;
    line-height: 42px;
  }
}
.news_list_nav {
  width: 100%;
  height: 40px;
  line-height: 40px;
  box-sizing: border-box;
  display: flex;
  padding: 0px 48px;
  justify-content: space-between;
  color: #aaaaaa;
  font-size: 14px;
  border-bottom: 1px solid #e6e6e6;
  cursor: pointer;
}
.news_list_nav_active,
.right_nav_active {
  color: #304156;
  position: relative;
}
.news_list_nav_active::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background-color: #304156;
  bottom: 0px;
  right: 7px;
}
.right_nav {
  width: 88px;
  text-align: center;
  cursor: pointer;
  flex-shrink: 0;
}
.right_nav_active::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 2px;
  background-color: #304156;
  bottom: 0px;
  right: 30px;
}
.search_contain {
  height: 46px;
  background-color: #fafafb;
  padding-left: 18px;
  padding-top: 5px;
  position: relative;
  img {
    width: 12px;
    height: 12px;
    position: absolute;
    cursor: pointer;
  }
  .search_img {
    top: 17px;
    left: 30px;
  }
  .clear_img {
    right: 12px;
  }
  input {
    width: 230px;
    height: 24px;
    background-color: #fff;
    font-size: 13px;
    padding-left: 30px;
    border-radius: 5px;
    outline: none;
    border: 0px;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #ccc;
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #ccc;
  }

  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */

    color: #ccc;
  }

  input::-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #ccc;
  }
}
.news_list_content {
  height: 57px;
  box-sizing: border-box;
  padding: 0px 12px;
  padding-top: 10px;
  cursor: pointer;
  position: relative;
  .news_list_inner {
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    justify-content: space-between;
    padding-bottom: 6px;
    position: relative;
    .deleteIcon {
      width: 12px;
      height: 12px;
      position: absolute;
      top: -9px;
      right: -11px;
    }
    img {
      width: 31px;
      height: 31px;
      border-radius: 50%;
    }
    .guest_info {
      display: flex;
      flex-direction: column;
      height: 39px;
      width: 120px;
    }
    .guest_id {
      font-size: 14px;
      color: #333;
    }
    .time {
      color: #aaa;
      font-size: 11px;
      margin-top: 5px;
    }
    .guest_type {
      width: 34px;
      height: 16px;
      line-height: 16px;
      text-align: center;
      background-color: #ffc267;
      color: #fff;
      font-size: 12px;
      margin-top: 7px;
    }
    .blue {
      background-color: #32c5ff;
    }
  }
  .unread_news {
    position: absolute;
    width: 12px;
    height: 12px;
    line-height: 12px;
    text-align: center;
    font-size: 10px;
    border-radius: 50%;
    color: #fff;
    background-color: #ff3200;
    top: -6px;
    left: 25px;
  }
}
.news_list_content:hover {
  background-color: #f8f8f8;
}
.news_list_content_active {
  background-color: #d6f4ff;
}
.news_list_content_active::before {
  content: "";
  position: absolute;
  height: 57px;
  width: 6px;
  background-color: #304156;
  top: 0;
  left: 0;
}
.right_container {
  flex: 1;
}
.no_news {
  margin-top: 8%;
  text-align: center;
  color: #304156;
  font-size: 28px;
  margin-left: 25%;
  img {
    margin-right: 70px;
  }
}
.right_top {
  background-color: #e8e8e8;
  height: 64px;
  box-sizing: border-box;
  padding-left: 20px;
  line-height: 64px;
}
.has_news {
  display: flex;
}
.current_guest_info {
  display: flex;
  color: #333;
  font-size: 14px;
  img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    margin-top: 11px;
  }
}
.chat {
  width: 100%;
  border-right: 1px solid #e6e6e6;
  box-sizing: border-box;
}
.chat_content {
  box-sizing: border-box;
  display: flex;
  position: relative;
}
.chat_edit {
  height: 129px;
  box-sizing: border-box;
  padding: 13px 11px 0px 20px;
  border-top: 1px solid #e6e6e6;
  position: relative;
}
.add_look {
  display: flex;
  position: relative;
  img {
    width: 20px;
    height: 20px;
  }
}
.msg_face {
  width: 20px;
  height: 20px;
  margin-right: 18px;
  background: url("../../../../static/images/msg-face.png") no-repeat;
  background-size: 100% 100%;
}
.emoji {
  width: 391px;
  position: absolute;
  left: -20px;
  top: -168px;
  border: 1px solid #e6e6e6;
  border-radius: 8px;
  background-color: #fff;
}
.emoji_li {
  float: left;
  margin-left: 10px;
  margin-top: 10px;
  width: 28px;
  height: 28px;
  line-height: 28px;
  font-size: 20px;
}
.emoji_li:hover {
  background: #eeeeee;
  border-radius: 5px;
  cursor: pointer;
}
.write_news {
  width: 90%;
  // height: 87px;
  height: 62%;
  box-sizing: border-box;
  resize: none;
  margin-top: 9px;
  overflow: hidden;
  outline: none;
  border: none;
}
.send_btn {
  width: 59px;
  height: 26px;
  line-height: 26px;
  border-radius: 2px;
  background-color: #304156;
  color: #fff;
  font-size: 14px;
  text-align: center;
  position: absolute;
  bottom: 10px;
  right: 10px;
  cursor: pointer;
}
.noList {
  text-align: center;
  font-size: 14px;
  color: #aaa;
  margin-top: 20%;
}
</style>
